<template>
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" :scroll-y="false">
					<view class="tn-gradient-bg__cool-6 top-font-title"
						style="height: 100%; width: 100%; display: flex;flex-direction: column;align-items: center;">
						<!-- 顶部占位 -->
						<view :style="'height:' + sConf.tH + 'px;'"> </view>

						<!-- 标题 -->
						<view class="tn-green-disabled_bg"
							style="margin-top: 60px;width: 300px; padding: 10px 100px;border-radius: 20px;font-size: x-large;font-weight: bold;">
							订单状态 </view>

						<!-- 插图 -->
						<image :src="sConf.pics + '/media/images/sw5.png'" mode="aspectFit"
							style="width: 50%;height: 50%;"> </image>

						<!-- 订单状态 -->
						<view v-if="ductData === null" class="msgBox">订单无效</view>

						<!-- 卡片 -->
						<view v-if="ductData && ductData.status === 0" class="msgBox">
							订单未支付
						</view>
						<view v-if="ductData && ductData.status === 1" class="msgBox">
							商品准备中
						</view>
						<view v-if="ductData && ductData.status === 2" class="msgBox">
							包裹已发出，物流运输中
						</view>
						<view v-if="ductData && ductData.status === 3" class="msgBox">
							已经评价
						</view>

						<!-- 跳转 -->
						<view class="navBackButton">
							<button type="primary" @click="navToPage">回到首页</button>
						</view>

						<!-- 顶部自定义导航 -->
						<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{ title }}
						</tn-navbar>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				toTop: 0, // 页眉高度
				topH: 0,
				title: '订单详情',
				sConf: getApp().globalData,
				ductData: null

			}
		},
		onLoad(options) {
			const order = String(options.order || null);
			console.log('订单详情页', order);
			if (order) {
				this.loadOrderList(order)
			}
		},
		onReady() {

		},
		methods: {
			loadDefData() {
				console.log('初始化');
			},
			loadOrderList(e) {
				console.log('加载订单');
				let host = this.sConf.host + '/weapps/listReqsn/';
				let token = this.sConf.token || '';
				let data = {
					order: e
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('请求成功', res);
					if (res.rescode === 200) {
						if (res.resmsg.length === 1) {
							this.ductData = res.resmsg[0]
						}
					}
				});
			},
			/**
			 * 转换文本字符
			 */
			converStateText(e) {
				return utils.hasReqsnState(e)
			},
			zipStr(e) {
				return utils.zipStr(e)
			},
			navToPage() {
				console.log('navToPage');
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* start 全屏适配 */
	.window-top {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.window-flex {
		flex: 1;
		overflow: hidden;
	}

	.window-box {
		height: 100%;
		overflow: hidden;
	}

	.window-scroll {
		height: 100%;
		overflow: hidden;
	}

	/* end 全屏适配 */

	.msgBox {
		width: 100%;
		padding: 10px auto;
		font-size: larger;
		text-align: center;
	}

	.navBackButton {
		width: 100%;
		padding: 20px 10px;
		text-align: center;
	}
</style>